import * as React from 'react';
import './index.less';

const keys = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
/* eslint-disable */
const PyFilter = ({ values = [], active, onFilter = () => { } }) => {
  const enable = char => {
    let flag = false;
    values.map(item => {
      if (item === char) {
        flag = true;
      }
    });
    return flag;
  };
  const all = active === null || active === undefined || active === '';
  return (
    <div className="web-py-filter">
      {
        all ? <a className={`web-py-filter-item  web-py-filter-item--active`}>全部</a>
          : <a onClick={() => onFilter()} className="web-py-filter-item">全部</a>
      }
      {
        keys.map(char => {
          const classNames = ['web-py-filter-item'];
          if (!enable(char)) {
            classNames.push('web-py-filter-item--disabled');
          }
          if (active === char) {
            classNames.push('web-py-filter-item--active');
          }
          return <a
            key={char}
            onClick={
              () => {
                if (active !== char) {
                  onFilter(char)
                }
              }
            }
            className={classNames.join(' ')}
          >
            {char}
          </a>
        })
      }
    </div >
  );
};

export default PyFilter;
